// text placeholders
jQuery(document).ready(function(){
	Placeholder.init();
});
Placeholder = {
	top:"14px",
	topAway:"12px",
	marginLeft:"8px",
	init:function(){
		if(true || Placeholder.isCompatible){
			// HANDLE INPUT
			$('input[placeholder]').each(function(){
				var $this = $(this);
				var text = $this.attr('placeholder');
				// change the attribute to 'placeholderjs'
				$this.removeAttr('placeholder');
				$this.attr('placeholderjs',text);
				Placeholder.add($this);
				$this.unbind('blur.placeholder').bind('blur.placeholder',function(){
					// wait just a split fucking second
					setTimeout(function(){
						if($this.val() == ""){
							Placeholder.back($this);
						}
					},250);
				});
				$this.unbind('focus.placeholder').bind('focus.placeholder',function(){
					Placeholder.away($this);
				});
				// evaluate on each keydown just in case
				$this.unbind('keyup.placeholder').bind('keyup.placeholder',function(){
					if($this.val().length > 0){
						Placeholder.away($this);
					}
				});
				if($this.val() == ""){
					Placeholder.back($this);
				}
			});
			
			// HANDLE TEXTAREA
			$('textarea[placeholder]').each(function(){
				var $this = $(this);
				var text = $this.attr('placeholder');
				// change the attribute to 'placeholderjs'
				$this.removeAttr('placeholder');
				$this.attr('placeholderjs',text);
				Placeholder.add($this);
				$this.unbind('blur.placeholder').bind('blur.placeholder',function(){
					// wait just a split fucking second
					setTimeout(function(){
						if($this.val() == ""){
							Placeholder.back($this);

						}
					},250);
				});
				$this.unbind('focus.placeholder').bind('focus.placeholder',function(){
					Placeholder.away($this);

				});
				// evaluate on each keydown just in case
				$this.unbind('keyup.placeholder').bind('keyup.placeholder',function(){
					if($this.val().length > 0){
						Placeholder.away($this);

					}
				});
				if($this.val() == ""){
					Placeholder.back($this);
				}
			});
			
			// HANDLE SELECT
			$('select[placeholder]').each(function(){
				var $this = $(this);
				var text = $this.attr('placeholder');
				$this.removeAttr('placeholder');
				$this.attr('placeholderjs',text)
				Placeholder.add($this);
				Placeholder.away($this);
			});
		}
	},
	isCompatible:function(){
		var test = document.createElement('input');
		return ('placeholder' in test);
	},
	get:function($input){ // get hte placeholder $object by $input
		var $form = $input.closest('form');
		if($form.length == 0){
			$form = $input.closest('div');
		}
		var name = $input.attr('name');
		var $span = $form.find('span.placeholderjs[name='+name+']');
		return $span;
	},
	add:function($input){
		var text = $input.attr('placeholderjs');
		var name = $input.attr('name');
		var $span = $('<span class="placeholderjs" name="'+name+'">'+text+'</span>');
		// wrap the input
		$input.wrap('<div class="placeholderjs-wrapper" name="'+name+'"></div>');
		var $wrapper = $input.parent();
		
		// set css for wrapper
		$wrapper.css({
			position:"relative",
			backgroundColor:"rgba(0,0,0,0)",
			display:"inline-block"
		});
		
		// set css for span
		var vertical = Placeholder.getTopAway($input);
		if($input.val() == ""){
			vertical = Placeholder.top;
		}
		$span.css({
			"position":"absolute",
			"color":"rgb(201, 201, 201)",
			"fontSize":"11px",
			"top":vertical,
			"left":Placeholder.marginLeft,
			"display":"none",
			"backgroundColor":"white",
			"lineHeight":"9px",
			"padding":"0px 3px",
			borderRadius:"4px"
		});
		$span.click(function(){
			$input.focus();
		});
		$input.before($span);
		$span.fadeIn(250);
	},
	away:function($input){
		var $placeholder = Placeholder.get($input);
		$placeholder.stop(true,true).animate({"top":Placeholder.getTopAway($input)},150);
	},
	back:function($input){
		var $placeholder = Placeholder.get($input);
		$placeholder.stop(true,true).animate({"top":Placeholder.top},150);
	},
	getTopAway:function($input){
		var height = $input.outerHeight()-2;
		return height;
	}
};